<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0,0);
            }
            100% {
                transform: translate(1000px,0);
            }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 1：动画名称*/
            /* animation-name: move; */ 

            /* 2：花费时间秒s毫秒ms */
            /* animation-duration: 2s; */

            /* 3：运动曲线默认：ease （一般运动曲线属性是省略的)linear：匀速 */
            /* animation-timing-function: ease; */

            /* 4：何时（延时）开始 */
            /* animation-delay: 1s;默认是：0立刻开始 */

            /* 5：重复次数 iteration count次数默认：1次 infinite无限*/
            /* animation-iteration-count: infinite; */

            /* 6：是否反方向播放（倒车） 默认的是narmal 如果想要反方向（倒车）就写alternate */
            /* animation-direction: alternate; */

            /* 7：动画结束后的状态 默认的是backwards：回到起始状态   我们也可以让他停留在结束状态：forwards */
            /* animation-fill-mode:forwards; */

            /* 8：简写及顺序 */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
             /* animation: move 2s linear 0s 1 alternate forwards; */
            /* 9：可以省略但是前两个属性 name duration 一定要写 其实属性根据其默认值灵活运用可写 */
            animation:move 2s  infinite  alternate ;
        }
         div:hover {
            /* 鼠标经过div 让这个div 停止动画 当鼠标离开就继续动画 */
             animation-play-state: paused;
         }
    </style>
</head>
<body>
    <div></div>
</body>
</html>